<template>
  <el-dialog width="516px" class="dialog-mini body-small" v-el-drag-dialog :title="'分配角色'" :visible.sync="dialogRoleVisible">
    <el-form ref="rolesForm" size="small" v-if="dialogRoleVisible" label-position="left">
      <el-form-item>
        <select-roles :roles="selectRoles" :isOnlyStore="true" :userNames="selectRoleNames" v-on:roles-change="rolesChange"></select-roles>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="dialogRoleVisible = false">取消</el-button>
      <el-button size="mini" type="primary" @click="acceRole">确认</el-button>
    </div>
  </el-dialog>

</template>
<script>
import elDragDialog from '@/directive/el-dragDialog'
import * as apiAdmin from '@/api/user/adminUser'
import SelectRoles from '@/components/SelectRoles'
import * as apiAccsss from '@/api/sys/accessObjs'
import * as apiRoles from '@/api/sys/roles'
export default {
  components: {
    SelectRoles
  },
  directives: {
    elDragDialog
  },
  data() {
    return {
      temp: {},
      dialogRoleVisible: false, // 分配角色对话框
      selectRoles: [], // 用户分配的角色
      selectRoleNames: '',
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
      },
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    //显示对话框
    show(record) {
      // 显示窗口
      this.dialogRoleVisible = true;
      // 当前记录
      this.temp = record;
      // 更新form元素
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    getDetail() { // 获取详情
      // apiAdmin.getDetail({ id: this.temp.id }).then((res) => {
      //   this.temp = res.result;
      //   // 更新form元素
      //   this.$nextTick(() => {
      //     this.$forceUpdate();
      //   });
      // })

      var _this = this;
      apiRoles.loadForUser(this.temp.id).then((response) => {
        _this.selectRoles = response.result
        _this.getRoleList()

        this.$nextTick(() => {
          this.$forceUpdate();
        });
        // _this.$nextTick(() => {
        //   _this.$refs['rolesForm'].clearValidate()
        // })
      })
    },

    saveData() { // 更新提交
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          // apiAdmin.addOrUpdate(tempData).then(() => {
          //   // 显示成功
          //   this.$message.success(result.message, 1.5);
          //   // 关闭对话框事件
          //   this.handleCancel();
          //   // 通知父端组件提交完成了
          //   this.$emit("handleSubmit");
          // })
        }
      })
    },
    rolesChange(type, val) {
      if (type === 'Texts') {
        this.selectRoleNames = val
        return
      }
      this.selectRoles = val
    },

    // 获取角色
    getRoleList() {
      apiRoles.loadAll({}).then((response) => {
        this.selectRoleNames = [...response.result]
          .filter((x) => this.selectRoles.indexOf(x.id) > -1)
          .map((item) => item.name || item.account)
          .join(',')
      })
    },
    acceRole() {
      apiAccsss.assign({
        type: 'UserRole',
        firstId: this.temp.id,
        secIds: this.selectRoles,
      })
        .then(() => {
          this.dialogRoleVisible = false
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000,
          })
        })
    },
    //  关闭对话框事件
    handleCancel() {
      this.dialogRoleVisible = false;
      this.form.resetFields();
    },

  }
}
</script>
<style scoped>
</style>